<template>
	<view class="content">
		<view class="input-box">
			<u-icon name="account" class="icon" color="#ccc" size="28"></u-icon>
			<u-input v-model="uName" class="input" type="number" border="true" style="padding-left: 40rpx;" placeholder="请输入手机号码" />
		</view>
		<view class="input-box code-box">
			<u-input v-model="code" class="input"  border="true" type="text" style="padding-left: 40rpx;" placeholder="验证码" />
			<view class="codeBtn">获取验证码</view>
		</view>
		<view class="input-box">
			<button type="default" class="loginBtn" @click="next()">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uName:'',
				code:""
			}
		},
		methods: {
			// 点击下一步
			next(){
			}
		}
	}
</script>

<style scoped>
.content{
		margin-top: 30rpx;
	}
	.input-box{
		margin: 0rpx 20rpx;
		position: relative;
	}
	.code-box{
		display: flex;
	}
	.code-box .codeBtn{
		line-height: 70rpx;
		background-color: white;
		border: 1px solid rgb(220, 223, 230);
		padding: 0px 30rpx;
	}
.input-box .icon{
	position: absolute;
	left: 10rpx;
	top: 20rpx;
	z-index: 100;
}
.input-box .input{
	background-color: white;
}
.loginBtn{
	margin-top: 30rpx;
	background-color: orange;
	color: white;
}
</style>
